<template>
  <div class="login_bor">
    <div class="login_img">
      <img height="350px" width="100%" src="../../static/img/login_body_bg.png" />
    </div>
    <div class="login">
      <div class="login_inp">
          <div class="login_tit">
            <p class="mess">注册</p>
          </div>
        <el-form :label-position="labelPosition" class="login_form" label-width="80px" :model="formLabelAlign">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="users.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input placeholder="请输入密码" v-model="users.password" show-password></el-input>
          </el-form-item>
          <el-form-item label="手机">
            <el-input placeholder="请输入手机号" v-model="users.mobile"></el-input>
          </el-form-item>
          <el-form-item label="验证码">
            <el-input placeholder="请输入验证码" v-model="users.code" class="code"></el-input>
            <el-button type="primary" plain class="code_btn" @click="fasong">获取验证码</el-button>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input placeholder="请输入邮箱" v-model="users.email"></el-input>
          </el-form-item>
          <el-button type="primary" plain class="login_btn" @click="regist">注册</el-button>
        </el-form>
        <p class="toreg">已有帐号？去<a style="color:blue" @click="goregist()">登录</a></p>
      </div>
      <div class="login_rig">
        <img class="login_rig_img" src="../../static/img/login_body_right.png" />
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
export default {
   data() {
      return {
        labelPosition: 'right',
        users:{}
      }
    },

    methods:{
        goregist:function(){
            this.$router.push("/login");
        },
      fasong:function(mobile){
          var _this = this;
        axios.post("/api/send/send/"+_this.users.mobile).then(function (res) {
            if (res.data=="发送失败"){
              alert("请重新发送");
            }else {
              alert("验证码已发送，请注意查收")
            }

        })
      },
      regist:function () {
        var _this = this;
        axios.post("/api/send/registry",_this.users).then(function (res) {


          if (res.data=="验证码正确"){
            alert("注册成功")
            _this.$router.push("/login")
          }else{
            alert(res.data);
          }
        })
      }
    }
};
</script>

<style>
.code{
  width: 200px;
  margin-left: -2px;
}
.login_bor {
  height: 800px;
  background-color: #ffffff;
  width: 100%;
}
.login {
  width: 900px;
  height: 513px;
  background-color: #ffffff;
  position: absolute;
  left: 315px;
  top: 200px;
  box-shadow: #666 0 0 0.7rem;
}
.login_rig {
  float: right;
  background-color: burlywood;
  height: 513px;
  width: 200px;
}
.login_rig_img {
  position: absolute;
  right: 0px;
}
.login_inp {
  width: 481px;
  height: 513px;
  float: left;
}
.login_tit{
    width: 513px;
    height: 80px;

}
.login_form{
    width: 400px;
    margin-left: 30px;
}
.mess{
    font-size: 25px;
    line-height: 60px;
    margin-left: 20px;
}
.login_btn{
    width: 100px;
    margin-left: 70px;
}
.toreg{
    float: right;
    margin-right: 50px;
}
</style>
